<template>
  <div class="content">
    <div class="content-Header">
      <div class="banner">
        <ul>
          <li @click = "goclass" v-for = "(item, index) of list" :key = "index">
            {{ item.bigstyle }}
          </li>
        </ul>
      </div>
      <div class="lunbo">
        <mt-swipe :show-indicators="false">
          <mt-swipe-item v-for = "(item, index) of lunbolist" :key = "index">
            <img :src="item.banner_img_url"/>
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="leibie">
        <ul>
          <router-link :to="item.path" tag='li' v-for="(item, index) of xiaolei" :key = "index">
            <span :class = "item.icon"></span>
            <p> {{ item.miaoshu }} </p>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="indexContent">
      <div class="in" v-for = "(item,index) of tuijian" :key = "index">
        <h3>{{ item.Header }}</h3>
        <ul class="ITui">
          <li @click = "goDetail(itm)" v-for = "itm of item.Tlist" :key = "itm._id">
            <figure>
              <img :src="itm.cover">
              <figcaption>
                <header>{{ itm.title }} </header>
                <div class="shortIntro">{{ itm.shortIntro }}</div>
                <div class="Tautor">
                  <a class="iconfont icon-zuozhe" rel="javascript:;">{{ itm.author }}</a>
                  <p>
                    <span>{{ itm.majorCate }} </span>
                    <span>{{ itm.latelyFollower }} </span>
                  </p>
                </div>
              </figcaption>
            </figure>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Indicator } from 'mint-ui'
Vue.use(Swipe, SwipeItem, Indicator)
export default {
  data () {
    return {
      lunbolist: [],
      list: [
        {
          major: 'female',
          bigstyle: '女频'
        },
        {
          major: 'male',
          bigstyle: '男频'
        },
        {
          major: 'picture',
          bigstyle: '漫画'
        },
        {
          major: 'press',
          bigstyle: '出版'
        }
      ],
      xiaolei: [
        {
          icon: 'iconfont icon-fenlei',
          miaoshu: '分类',
          path: '/classify'
        },
        {
          icon: 'iconfont icon-paixingbang',
          miaoshu: '排行',
          path: '/rankingList'
        },
        {
          icon: 'iconfont icon-chubanshe',
          miaoshu: '书单',
          path: '/booklist'
        }

      ],
      tuijian: [
        {
          Header: '女生推荐',
          Tlist: []
        },
        {
          Header: '男生推荐',
          Tlist: []
        },
        {
          Header: '生活时尚推荐',
          Tlist: []
        }

      ]
    }
  },
  created () {
    fetch('/axiang/ap/api/bannerlist.php')
      .then(res => res.json())
      .then((data) => {
        console.log(data)
        this.lunbolist = data.data
      })
    fetch('/liang/cats/lv2/statistics')
      .then(res => res.json())
      .then((data) => {
        console.log(data)
      })
    fetch('/liang/ranking/gender')
      .then(res => res.json())
      .then((data) => {
        console.log(data)
      })
    fetch('/liang/cats/lv2')
      .then(res => res.json())
      .then((data) => {
        console.log(data)
      })
    Indicator.open('加载中...')
    fetch('/xiaoliang/category-info?gender=female&type=hot&major=古代言情&minor=&start=0&limit=5')
      .then(res => res.json())
      .then((data) => {
        console.log(data.books)
        for (let i = 0; i < data.books.length; i++) {
          data.books[i].cover = 'http://statics.zhuishushenqi.com' + data.books[i].cover
        }
        this.tuijian[0].Tlist = data.books
        Indicator.close()
      })
    fetch('/xiaoliang/category-info?gender=male&type=hot&major=武侠&minor=&start=0&limit=5')
      .then(res => res.json())
      .then((data) => {
        console.log(data)
        for (let i = 0; i < data.books.length; i++) {
          data.books[i].cover = 'http://statics.zhuishushenqi.com' + data.books[i].cover
        }
        this.tuijian[1].Tlist = data.books
      })
    fetch('/xiaoliang/category-info?gender=press&type=hot&major=生活时尚&minor=&start=0&limit=5')
      .then(res => res.json())
      .then((data) => {
        console.log(data.books)
        for (let i = 0; i < data.books.length; i++) {
          data.books[i].cover = 'http://statics.zhuishushenqi.com' + data.books[i].cover
        }
        this.tuijian[2].Tlist = data.books
      })
  },
  methods: {
    goDetail (item) {
      this.$router.push({path: `/detail?id=${item._id}`})
    },
    goclass () {
      this.$router.push('/classify')
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.content{
  @include flex();
  @include rect(100%, auto);
  @include overflow();
  .content-Header{
    @include rect(100%, 3rem);
    .banner{
      @include rect(100%, 0.3rem);
      @include border(0px 0px 1px 0px, #cdcdcd, solid)
      ul{
        @include rect(100%, 100%);
        @include flexbox();
        @include justify-content(space-around);
        li{
          @include text-color(#000);
          padding:0 5px;
          line-height:0.3rem;
          font-size:16px;
          font-weight:900;
        }
      }
    }
    .lunbo{
      @include rect(100%, 1.7rem);
      @include border(0px 0px 1px 0px, #cdcdcd, solid)
    }
    .leibie{
      @include rect(100%, 1rem);
      ul{
        @include rect(100%, 100%);
        @include flexbox();
        @include justify-content(space-around);
        li{
          @include flex();
          @include flexbox();
          @include flex-direction(column);
          @include justify-content();
          @include align-items();
          span{
            font-size: 0.3rem;
            color: #d5deee
          }
        }
      }
    }
  }
  .indexContent{
    overflow: auto;
      h3{
        @include rect(100%, 0.3rem);
        @include background-color(#fde6ee);
        line-height: 0.3rem;
        font-size: 0.16rem;
        font-weight: 900;
      }
      .ITui{
        li{
          @include rect(100%, 1.5rem);
          margin:0.06rem 0;
          figure{
            @include rect(100%, 1.5rem);
            @include flexbox();
            @include align-items(space-bettween);
            img{
              @include rect(1rem, auto);
            }
            figcaption{
              margin-left: 0.05rem;
              @include flexbox();
              @include flex-direction(column);
              @include justify-content(space-around);
              .shortIntro{
                height: 0.4rem;
                overflow: hidden;
              }
              .Tautor{
                @include flexbox();
                @include justify-content(space-bettween);
                .icon-zuozhe{
                  font-size: 0.12rem;
                  color: black;
                  margin: 0 0.03rem;
                }
              }
              p{
                font-size: 0.12rem;
                span{
                  background-color:#f0eff4;
                  border-radius:0.03rem;
                  padding:0.05rem;
                  margin:0 0.05rem;
                }
              }
            }
          }
        }
      }
    }
}
</style>
